<template>
  <div>
    <app-head></app-head>
    <app-body>
      <div style="min-height: 85vh;">
        <el-tabs v-model="labelName" type="border-card" @tab-click="handleClick">
          <el-tab-pane label="全部分类" name="0">
            <div style="margin: 0 20px;">
              <el-row :gutter="30">
                <el-col :span="6" v-for="(tea, index) in teaList" :key="index">
                  <div class="tea-card" @click="toDetails(tea)">
                    <el-image style="width: 100%; height: 160px" :src="$store.state.baseApi + tea.imgUrl"
                              fit="contain">
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline">无图</i>
                      </div>
                    </el-image>
                    <div class="tea-title">
                      {{ tea.teaName }}
                    </div>
                    <el-row style="margin: 5px 10px;">
                      <el-col :span="24">
                        <div class="tea-prive">￥{{ tea.teaPrice }}</div>
                      </el-col>
                    </el-row>
                    <div class="user-info" v-if="tea.user">
                      <el-image style="width: 30px; height: 30px"
                                :src="$store.state.baseApi + tea.user.avatar" fit="contain">
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline">无图</i>
                        </div>
                      </el-image>
                      <div class="user-nickname">{{ tea.user.nickname }}</div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="fenye">
              <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                             :page-size="8" layout="prev, pager, next, jumper" :total="totalItem">
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane v-for="item in typeList" :key="item.id" :label="item.name" :name="item.id + ''">
            <div style="margin: 0 20px;">
              <el-row :gutter="30">
                <el-col :span="6" v-for="(tea, index) in teaList" :key="index">
                  <div class="tea-card" @click="toDetails(tea)">
                    <el-image style="width: 100%; height: 160px" :src="$store.state.baseApi + tea.imgUrl"
                              fit="contain">
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline">无图</i>
                      </div>
                    </el-image>
                    <div class="tea-title">
                      {{ tea.teaName }}
                    </div>
                    <el-row style="margin: 5px 10px;">
                      <el-col :span="24">
                        <div class="tea-prive">￥{{ tea.teaPrice }}</div>
                      </el-col>
                    </el-row>
                    <div class="user-info" v-if="tea.user">
                      <el-image style="width: 30px; height: 30px"
                                :src="$store.state.baseApi + tea.user.avatar" fit="contain">
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline">无图</i>
                        </div>
                      </el-image>
                      <div class="user-nickname">{{ tea.user.nickname }}</div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="fenye">
              <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                             :page-size="8" layout="prev, pager, next, jumper" :total="totalItem">
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </app-body>
    <app-foot></app-foot>
  </div>
</template>

<script>
import AppHead from '../common/AppHeader.vue';
import AppBody from '../common/AppPageBody.vue'
import AppFoot from '../common/AppFoot.vue'

export default {
  name: "index",
  components: {
    AppHead,
    AppBody,
    AppFoot
  },
  data() {
    return {
      labelName: '1',
      teaList: [],
      currentPage: 1,
      totalItem: 1,
      typeList: [],
    };
  },
  created() {
    console.log(this.$route.query.labelName);
    this.labelName = this.$route.query.labelName;
    this.findteaTiem(1)
    this.$api.listType({begin: 0, size: 999}).then((res) => {
      this.typeList = res.data;
    })
  },
  watch: {
    $route(to, from) {
      this.labelName = to.query.labelName;
      let val = parseInt(to.query.page) ? parseInt(to.query.page) : 1;
      this.findteaTiem(val);
    }
  },
  methods: {
    findteaTiem(page) {
      const loading = this.$loading({
        lock: true,
        text: '加载数据中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0)'
      });
      if (this.labelName > 0) {
        this.$api.findteaTiemByLabel({
          teaLabel: this.labelName,
          page: page,
          nums: 8
        }).then(res => {
          console.log(res);
          let list = res.data.list;
          for (let i = 0; i < list.length; i++) {
            list[i].timeStr = list[i].releaseTime.substring(0, 10) + " " + list[i].releaseTime.substring(11, 19);
            let pictureList = JSON.parse(list[i].pictureList);
            list[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
          }
          this.teaList = list;
          this.totalItem = res.data.count;
          console.log(this.totalItem);
        }).catch(e => {
          console.log(e);
        }).finally(() => {
          loading.close();
        })
      } else {
        this.$api.findteaTiem({
          page: page,
          nums: 8
        }).then(res => {
          console.log(res);
          let list = res.data.list;
          for (let i = 0; i < list.length; i++) {
            list[i].timeStr = list[i].releaseTime.substring(0, 10) + " " + list[i].releaseTime.substring(11, 19);
            let pictureList = JSON.parse(list[i].pictureList);
            list[i].imgUrl = pictureList.length > 0 ? pictureList[0] : '';
          }
          this.teaList = list;
          this.totalItem = res.data.count;
          console.log(this.totalItem);
        }).catch(e => {
          console.log(e);
          if (
              e.response == undefined ||
              e.response.data == undefined
          ) {
            this.$message({
              showClose: true,
              message: e,
              type: "error",
              duration: 20000,
            });
          } else {
            this.$message({
              showClose: true,
              message: e.response.data,
              type: "error",
              duration: 20000,
            });
          }
        }).finally(() => {
          loading.close();
        })
      }
    },
    handleClick(tab, event) {
      console.log(this.labelName);
      this.$router.replace({query: {page: 1, labelName: this.labelName}});
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$router.replace({query: {page: val, labelName: this.labelName}});
    },
    toDetails(tea) {
      this.$router.push({path: '/details-tea', query: {id: tea.id}});
    }
  },
  mounted() {
    // this.findteaTiem();
  }
}
</script>

<style scoped>
.tea-card {
  height: 300px;
  border: #eeeeee solid 1px;
  margin-bottom: 15px;
  cursor: pointer;
}

.fenye {
  display: flex;
  justify-content: center;
  height: 60px;
  align-items: center;
}

.tea-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 10px;
}

.tea-prive {
  text-align: center;
  font-size: 16px;
  color: red;
  margin: auto;
}


.user-nickname {
  color: #999999;
  font-size: 12px;
  display: flex;
  align-items: center;
  height: 30px;
  padding-left: 10px;
}

.user-info {
  margin-top: 10px;
  float: right;
  padding: 5px 10px;
  height: 30px;
  display: flex;
}
</style>